<template>
  <div class="container-box">
    <el-container>
      <el-header>
        <div class="title">
          <img src="@image/index.png" alt="" />
        </div>
      </el-header>
      <el-main style="padding: 20px 0">
        <div class="tabs">
          <el-tabs
            v-model="dataSource"
            type="card"
            class="searchTab"
            @tab-click="handleClick"
          >
            <el-tab-pane
              v-for="item in dataSourceList"
              :key="item.dataSource"
              :label="item.title"
              :name="item.dataSource"
            >
            </el-tab-pane>
            <div>
              <el-input
                v-model="keyWord"
                placeholder="关键词用‘空格’分开，不同关键字之间为‘和’的关系"
              >
                <el-button slot="append" type="primary" @click="gotoInfo"
                  ><i class="fa fa-search" aria-hidden="true"
                /></el-button>
              </el-input>
              <div
                class="hightSearch"
                style="cursor: pointer"
                @click="$router.push('/pages/advanced-search')"
              >
                <p>高级</p>
                <p>检索</p>
              </div>
            </div>
          </el-tabs>
        </div>
        <div class="hotSearch">
          <span class="hotSearchTitle">热搜：</span>
          <span v-for="(item, index) in hotSearchList" :key="index"
          @click="goUrl(item)">{{item}}</span>
        </div>
        <div class="tabs-content">
          <el-tabs v-model="contentTabname" tab-position="left">
            <el-tab-pane label="热门推荐" name="hotRecommed">
              <div class="subTabs">
                <el-tabs v-model="hotRecommedTabName">
                  <el-tab-pane label="十大案件" name="majorCase">
                    <el-table
                      class="tableDom"
                      :data="majorCaseTableData"
                      height="290"
                      style="width: 100%;overflow-y:auto;overflow-x:hidden"
                    >
                       <el-table-column
                        prop="anjianbh"
                        label="案件编号"
                        show-overflow-tooltip
                        width="180"
                      >
                      <template slot-scope="scope">
                        <span @click="goURL(scope)">{{scope.row.anjianbh}}</span>
                      </template>
                      </el-table-column>
                      <el-table-column
                        prop="anjianlx"
                        label="类型"
                        show-overflow-tooltip
                        width="180"
                      >
                        <template slot-scope="scope">
                          {{ formmatAJtype(scope.row.anjianlx) }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="zhuanlimc"
                        show-overflow-tooltip
                        label="发明名称"
                      />
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="优秀案件" name="excellentCase">
                    <el-table
                      class="tableDom"
                      :data="excellentTableData"
                      height="290"
                      style="width: 100%;overflow-y:auto;overflow-x:hidden"
                    >
                       <el-table-column
                        prop="anjianbh"
                        label="案件编号"
                        show-overflow-tooltip
                        width="180"
                      >
                      <template slot-scope="scope">
                        <span @click="goURL(scope)">{{scope.row.anjianbh}}</span>
                      </template>
                      </el-table-column>
                      <el-table-column
                        prop="anjianlx"
                        label="类型"
                        show-overflow-tooltip
                        width="180"
                      >
                        <template slot-scope="scope">
                          {{ formmatAJtype(scope.row.anjianlx) }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="zhuanlimc"
                        show-overflow-tooltip
                        label="发明名称"
                      />
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="典型案例" name="dxCase">
                    <el-table
                      class="tableDom"
                      :data="excellentTableData"
                      height="290"
                      style="width: 100%;overflow-y:auto;overflow-x:hidden"
                    >
                       <el-table-column
                        prop="anjianbh"
                        label="案件编号"
                        show-overflow-tooltip
                        width="180"
                      >
                      <template slot-scope="scope">
                        <span @click="goURL(scope)">{{scope.row.anjianbh}}</span>
                      </template>
                      </el-table-column>
                      <el-table-column
                        prop="anjianlx"
                        label="类型"
                        show-overflow-tooltip
                        width="180"
                      >
                        <template slot-scope="scope">
                          {{ formmatAJtype(scope.row.anjianlx) }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="zhuanlimc"
                        show-overflow-tooltip
                        label="发明名称"
                      />
                    </el-table>
                  </el-tab-pane>
                    <el-tab-pane label="质保优秀案件" name="zbyyCase">
                    <el-table
                      class="tableDom"
                      :data="excellentTableData"
                      height="290"
                      style="width: 100%;overflow-y:auto;overflow-x:hidden"
                    >
                      <el-table-column
                        prop="anjianbh"
                        label="案件编号"
                        show-overflow-tooltip
                        width="180"
                      >
                      <template slot-scope="scope">
                        <span @click="goURL(scope)">{{scope.row.anjianbh}}</span>
                      </template>
                      </el-table-column>
                      <el-table-column
                        prop="anjianlx"
                        label="类型"
                        show-overflow-tooltip
                        width="180"
                      >
                        <template slot-scope="scope">
                          {{ formmatAJtype(scope.row.anjianlx) }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="zhuanlimc"
                        show-overflow-tooltip
                        label="发明名称"
                      />
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-tab-pane>
            <el-tab-pane label="热门检索" name="hotSearch">
              <div style="padding-top: 15px">
                <el-table
                  class="tableDom"
                  :data="hotSearchTableData"
                  height="329"
                  style="width: 100%;overflow-y:auto;overflow-x:hidden"
                >
                  <el-table-column
                    prop="id"
                    label="排行榜"
                    show-overflow-tooltip
                    width="180"
                  />
                  <el-table-column
                    prop="guanjianc"
                    label="关键字"
                    show-overflow-tooltip
                    width="180"
                  >
                  <template slot-scope="scope">
                    <span @click="goProbableBro(scope)" style="cursor: pointer;">{{scope.row.guanjianc}}</span>
                  </template>
                  </el-table-column>
                  <el-table-column
                    prop="redu"
                    show-overflow-tooltip
                    label="热度"
                  />
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane name="hotCase" label="热门案件">
              <div>
                <el-tabs v-model="hotCaseTabName">
                  <el-tab-pane label="全委" name="wholeCommittee">
                    <el-table
                      class="tableDom"
                      :data="wholeTableData"
                      height="290"
                      style="width: 100%;overflow-y:auto;overflow-x:hidden"
                    >
                      <el-table-column
                        prop="anjianbh"
                        label="案件编号"
                        show-overflow-tooltip
                        width="180"
                      />
                      <el-table-column
                        label="类型"
                        show-overflow-tooltip
                        width="180"
                      >
                        <template slot-scope="scope">
                          {{ formmatAJtype(scope.row.anjianlx) }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="zhuanlimc"
                        show-overflow-tooltip
                        label="发明名称"
                      />
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="本处室" name="homeRoom">
                    <el-table
                      class="tableDom"
                      :data="bcsTableData"
                      height="290"
                      style="width: 100%;overflow-y:auto;overflow-x:hidden"
                    >
                      <el-table-column
                        prop="anjianbh"
                        label="案件编号"
                        show-overflow-tooltip
                        width="180"
                      />
                      <el-table-column
                        label="类型"
                        show-overflow-tooltip
                        width="180"
                      >
                        <template slot-scope="scope">
                          {{ formmatAJtype(scope.row.anjianlx) }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="zhuanlimc"
                        show-overflow-tooltip
                        label="发明名称"
                      />
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-tab-pane>
            <el-tab-pane name="integratedCircuit" label="集成电路">
              <div style="padding-top: 15px">
                <el-table
                  class="tableDom"
                  :data="integratedCircuitTableData"
                  height="329"
                  style="width: 100%;overflow-y:auto;overflow-x:hidden"
                >
                  <el-table-column
                    prop="anjianbh"
                    label="案件编号"
                    show-overflow-tooltip
                    width="180"
                  />
                  <el-table-column
                    prop="anjianlx"
                    label="类型"
                    show-overflow-tooltip
                    width="180"
                  >
                    <template slot-scope="scope">
                      {{ formmatAJtype(scope.row.anjianlx) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="zhuanlimc"
                    show-overflow-tooltip
                    label="发明名称"
                  />
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import {
  getHotSearchWords,
  buildSearch,
  showhotRecommendList,
  showPopularSearchList,
} from "@api/quick";

const anjianlxList = [
  { anjianlx: "fushen", name: "复审" },
  { anjianlx: "wuxiao", name: "无效" },
  { anjianlx: "waiguan", name: "外观" },
  { anjianlx: "susong", name: "诉讼" },
  { anjianlx: "jicheng", name: "集成电路" },
];
export default {
  data() {
    return {
      /*检索复审tab页*/
      dataSource: "fushen",
      keyWord: "", //关键词
      contentTabname: "hotRecommed",
      hotRecommedTabName: "majorCase",
      hotCaseTabName: "wholeCommittee",
      dataSourceList: [
        { title: "复审", dataSource: "fushen" },
        { title: "无效", dataSource: "wuxiao" },
        { title: "外观无效", dataSource: "waiguan" },
        { title: "司法判决", dataSource: "susong" },
      ],
      /* 热搜*/
      hotSearchList: [],
      /* 集成电路表格信息*/
      integratedCircuitTableData: [],
      /* 全委表格信息*/
      wholeTableData: [],
      /* 重大案件表格信息*/
      majorCaseTableData: [],
      /*优秀案件表格信息*/
      excellentTableData: [],
      /*热门检索列表*/
      hotSearchTableData: [],
      // 本处室
      bcsTableData: [],
    };
  },
  created() {
    /*获取热搜*/
    this._getHotSearchWords();
    this.initTable();
  },
  methods: {
    goProbableBro(val){
      this.keyWord = val.row.guanjianc
      this.gotoInfo()
      // console.log(val)
    },
    // 点击案件编号跳转
    goURL(item) {
      console.log(item)
    // 案件编号（anjianbh）、决定号（juedingh）、类型（dataSource）
    let data = {
      anjianbh: item.row.anjianbh,
      juedingh: item.row.juedingh,
      dataSource: item.row.anjianlx,
    };
    this.$router.push({
      path: "/pages/info/1",
      query: { data: JSON.stringify(data) },
    });
  },
    // 点击热搜跳转
    goUrl(item){
      this.keyWord=item;
      this.gotoInfo()
    },
    initTable() {
      this._showhotRecommendList();
      this._showPopularSearchList();
    },
    /*过滤案件类型*/
    formmatAJtype(type) {
      const { name } = anjianlxList.find(({ anjianlx }) => anjianlx === type);
      return name;
    },
    /*获取热门检索列表*/
    async _showPopularSearchList() {
      const {
        data: { docs, total },
      } = await showPopularSearchList();
      this.hotSearchTableData = docs || [];
    },
    /*获取热门列表*/
    _showhotRecommendList() {
      const tuijianlxList = [
        {
          tuijianlx: "0",
          name: "重大案件",
          tableListName: "majorCaseTableData",
        },
        {
          tuijianlx: "1",
          name: "集成电路",
          tableListName: "integratedCircuitTableData",
        },
        { tuijianlx: "2", name: "全委", tableListName: "wholeTableData" },
        {
          tuijianlx: "3",
          name: "优秀案件",
          tableListName: "excellentTableData",
        },
        { tuijianlx: "6", name: "本处室", tableListName: "bcsTableData" },
      ];
      const promiseList = tuijianlxList.map(({ tuijianlx }) =>
        showhotRecommendList({ tuijianlx })
      );
      Promise.all(promiseList)
        .then((res) => {
          res.forEach(({ data }, index) => {
            console.log(data)
            this[tuijianlxList[index].tableListName] = data.docs || [];
          });
        })
        .catch((err) => {
          /*this.$message.error('error')*/
        });
    },
    /*获取热搜词*/
    async _getHotSearchWords() {
      const { data } = await getHotSearchWords();
      this.hotSearchList = data || [];
    },
    /*点击tab页*/
    handleClick(tab, event) {
      console.log(tab, event);
      // this.dataSource = val
    },
    /*构建检索式*/
    async _buildSearch() {
      const { keyWord, dataSource } = this;
      const results = await buildSearch({ keyWord, dataSource });
      console.log(results);
      return results.data || [];
    },
    async gotoInfo() {
      if(!this.keyWord){
       return this.$message.warning('请输入检索关键字')
      }
      const expList = await this._buildSearch();
			console.log(expList)
      this.$router.push({
        path: "/pages/list",
        query: {
          expList:JSON.stringify(expList),
          dataSource:this.dataSource
        },
      });
    },
  },
};
</script>

<style scoped>
/*整个滚动条*/
.tabs-content ::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
}

/*水平的整个滚动条*/
.tabs-content ::-webkit-scrollbar:horizontal {
  height: 6px;
  background-color: transparent;
}

/*滚动条轨道*/
.tabs-content :-webkit-scrollbar-track {
  background-color: transparent;
  border-right: none;
  border: none;
  border-radius: 5px;
}

/*竖直的滑块*/
.tabs-content ::-webkit-scrollbar-thumb {
  background-color: #b2b4b4;
  border-radius: 3px;
  border-top: 1px solid #b2b4b4;
  border-bottom: 1px solid #b2b4b4;
  border-left: 1px solid #b2b4b4;
}

/*水平的滑块*/

/deep/ .tabs-content ::-webkit-scrollbar-thumb:horizontal {
  /* background-color: rgba(220, 228, 243, 1); */
  border-radius: 3px;
  border-top: 1px solid #b2b4b4;
  /* border-right: 1px solid #f1f5fa;
  border-left: 1px solid #f1f5fa; */
}

/*定义滚动条的轨道，内阴影及圆角*/
/deep/ .tabs-content .scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: transparent;
}

/*定义滑块，内阴影及圆角*/
/deep/ .tabs-content .scrollbar::-webkit-scrollbar-thumb {
  /*width: 10px;*/
  height: 20px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #b2b4b4;
}

.container-box {
  font-family: "Microsoft YaHei";
  width: 800px;
  margin: auto;
}

.el-tabs__item {
  font-weight: normal;
}

.title {
  width: 100%;
  text-align: center;
}

.title > img {
  width: 500px;
}

.tabs .searchTab {
  width: 100%;
}

/deep/ .tabs .el-tabs__header {
  margin-bottom: -1px;
}

/deep/ .tabs .el-tabs--card > .el-tabs__header {
  border-bottom: none;
}

/deep/ .tabs .el-input-group--append .el-input__inner,
.el-input-group__prepend {
  border-top-left-radius: 0;
}

/deep/ .tabs .el-tabs--card > .el-tabs__header .el-tabs__item {
  margin-right: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 4px 0 0;
  color: #3e62bc;
  font-size: 16px;
  background-color: #e5eaf4;
}

/deep/ .tabs .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom-color: #fff;
  font-size: 16px;
  color: #71706d;
  background-color: #fff;
}

/deep/ .tabs .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}

/deep/ .tabs .el-input.is-active .el-input__inner,
.el-input__inner:focus {
  border-color: #dcdfe6;
  outline: 0;
}

/deep/ .tabs .el-input__inner:hover {
  border-color: #dcdfe6;
}

/deep/ .tabs .el-input__inner:focus {
  border-color: #dcdfe6;
}

/deep/ .tabs .el-input-group {
  width: calc(100% - 60px);
}

/deep/ .tabs .el-tabs__content .el-input__inner {
  height: 42px;
  line-height: 42px;
}

/deep/ .tabs .el-input-group__append button.el-button,
.el-input-group__append div.el-select .el-input__inner,
.el-input-group__append div.el-select:hover .el-input__inner,
.el-input-group__prepend button.el-button,
.el-input-group__prepend div.el-select .el-input__inner,
.el-input-group__prepend div.el-select:hover .el-input__inner {
  border-color: #3e62bc;
  background-color: #3e62bc;
  color: #fff;
  border: 1px solid #3e62bc;
  border-radius: 0 4px 4px 0;
}

/deep/ .tabs .el-input-group__append .el-icon-search {
  font-size: 16px;
  font-weight: 700;
}

.tabs .hightSearch {
  float: right;
  display: inline-block;
  margin-right: 0;
  vertical-align: top;
  /*margin-left: 20px;px*/
  border: 1px solid #dcdfe6;
  font-size: 14px;
  color: #909399;
  height: 42px;
  box-sizing: border-box;
  padding: 4px 7px;
}

.tabs .hightSearch > p {
  padding: 0;
  margin: 0;
}

/*热搜*/
.hotSearch span {
  display: inline-block;
  margin-right: 15px;
  color: #909399;
  font-size: 14px;
  cursor: pointer;
}

.hotSearch span:hover {
  color: #3e62bc;
}

.hotSearch > .hotSearchTitle {
  margin-right: 0;
  font-weight: 700;
}

.hotSearch > .hotSearchTitle:hover {
  color: #909399;
  cursor: text;
}

/*tab表格*/
.tabs-content {
  max-height: 500px;
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fefcff;
}

/deep/ .tabs-content .el-tabs--left .el-tabs__header.is-left {
  margin-right: 0;
}

/deep/ .tabs-content .el-tabs--left.el-tabs--card .el-tabs__nav {
  border: none;
}

/deep/ .tabs-content .el-tabs--left .el-tabs__active-bar.is-left,
.el-tabs--left .el-tabs__nav-wrap.is-left::after {
  left: 0;
  right: auto;
}

/deep/ .tabs-content .el-tabs--left .is-left .el-tabs__nav-wrap::after {
  background-color: transparent;
  left: 0;
  right: auto;
}

/deep/ .tabs-content .el-tabs--left .el-tabs__active-bar {
  background-color: #3e62bc;
}

/deep/ .tabs-content .el-tabs--left .el-tabs__active-bar.is-left,
.el-tabs--left .el-tabs__active-bar.is-right,
.el-tabs--right .el-tabs__active-bar.is-left,
.el-tabs--right .el-tabs__active-bar.is-right {
  width: 4px;
}

/deep/ .tabs-content .el-tabs--left .is-left .el-tabs__item {
  color: #71706d;
  font-size: 16px;
  background-color: #fefcff;
  height: 46px;
  line-height: 46px;
}

/deep/ .tabs-content .el-tabs--left .is-left .el-tabs__item.is-active {
  font-size: 16px;
  color: #3e62bc;
  font-weight: normal;
  background-color: #e5eaf4;
}

/deep/ .tabs-content .el-tabs--left > .el-tabs__content {
  padding: 15px;
  padding-top: 0;
  background-color: #fff;
  box-sizing: border-box;
}

/deep/ .tabs-content .el-tabs__content .el-tabs__nav-wrap::after {
  background-color: #dcdfe6;
  height: 1px;
}

/deep/ .tabs-content .el-tabs__content .el-tabs__active-bar {
  height: 4px;
}

/deep/ .tabs-content .el-tabs__content .el-tabs__item.is-active {
  color: #3e62bc;
  font-weight: normal;
}

/deep/ .tabs-content .el-tabs__content .el-tabs__item {
  font-size: 16px;
  color: #606266;
  font-weight: normal;
}

/deep/ .tabs-content .el-tabs__content .el-table thead {
  color: #606266;
  font-size: 14px;
  font-weight: 600;
}

/deep/ .tabs-content .el-tabs__content .el-table thead th,
tr {
  background-color: #f4f2f5;
}

/deep/ .tabs-content .el-tabs__content .el-table tbody tr,
td {
  color: #504f4c;
  font-size: 14px;
}

.tabs-content .tableDom {
  border: 1px solid #dcdfe6;
  border-bottom: none;
}

/deep/ .tabs-content .el-tabs__content .el-table__header {
  border-bottom: 1px solid #dcdfe6;
}

/deep/ .tabs-content .el-tabs__content .el-table th,
.el-table tr {
  background-color: #fff;
}

.el-container {
  height: 100% !important;
}

.el-header {
  align-items: center !important;
  margin: 50px 0;
}

.el-tabs--border-card {
  border: none !important;
}

.el-tabs__content .el-tab-pane {
  height: 100% !important;
}

.el-tag {
  height: 40px !important;
  line-height: 40px !important;
  margin-left: 20px !important;
}

.hotSearch {
  margin: 20px 0 50px 0;
}

.el-footer p {
  width: 100% !important;
  color: #979a9f !important;
  word-break: keep-all !important;
  font-size: 14px;
  text-align: center;
  margin: 0;
}

input::-webkit-input-placeholder {
  color: #acaeb3;
}

.el-footer > div > p {
  padding: 15px 0;
}
</style>
